<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json 演示</title>
<#include "/include/common.ftl"/>
    <script type="text/javascript" src="/assets/js/jquery.lSelect.js"></script>
</head>
<body>
<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">json文件，实现省市区联动</div>
        <div class="panel-body">
            <br>

            <select id="province" name="province" onchange="getCity();"> 　　　　　　　　
                <option value="-1">请选择</option>
                　　　　　　</select>
            <select id="city" name="city" onchange="getCounty()">　　　　　　　　
                <option value='-1'>请选择</option>
            </select>
            <select id="county" name="county">
                <option id='chooseCounty' value='-1'>请选择/县</option>
            </select>
            <input type="hidden" id="areaId" name="areaId" value="930" treePath=",926,927,"/>
            <br> <br>
            <input type="button" id="confirm" value="确定" onclick="confirmSum()"/>

        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var childArr = [];
    var countyArr = [];
    var $input, areaId, treePath, ids;
    $(function ($) {
        $input = $("#areaId");
        areaId = $input.val();
        treePath = $input.attr("treePath");

        ids = (treePath + areaId + ",").split(",");

        // 读取json文件，初始化省
        $.ajax({
            type: "GET",
            url: "/assets/js/page/area/t_area.json",
            dataType: "json",
            success: function (data) {
                $.each(data.RECORDS, function (i, n) {
                    if (n.parent == null) {
                        $("#province").append("<option value='" + n.id + "'>" + n.name + "</option>");
                    } else {
                        childArr.push(n);
                    }
                });

                //有默认的省数据
                if (ids[1] != null && ids[1] != "") {
                    selOption($("#province"), ids[1]);
                    $("#province").trigger("change");
                }
            }
        });
        $("#county").hide();
    });

    //根据省初始化市
    function getCity() {
        var province = $("#province").val();

        $("#city").empty();

        $("#county").empty();
        $("#county").hide();

        $("#city").append("<option value='-1'>请选择...</option>");

        //清空县数据
        countyArr = [];

        //循环市、县子数组
        childArr.forEach(function (item) {
            if (item.parent == province) {
                $("#city").append("<option value='" + item.id + "'>" + item.name + "</option>")
            } else {
                countyArr.push(item);
            }
        });

        //有市数据，默认选中
        if (ids[2] != null && ids[2] != "") {
            selOption($("#city"), ids[2]);
            $("#city").trigger("change");
        }
    }

    //根据市初始化区
    function getCounty() {
        var city = $("#city").val();
        $("#county").empty();

        $("#county").append("<option value='-1'>请选择...</option>");

        //循环区数组
        countyArr.forEach(function (item) {
            if (item.parent == city) {
                $("#county").append("<option value='" + item.id + "'>" + item.name + "</option>");
            }
        });

        if ($("#county option").length > 1) {
            $("#county").show();
            if (ids[3] != null && ids[3] != "") {
                selOption($("#county"), ids[3]);
            }
        } else {
            $("#county").hide();
        }
    }

    //指定选中项
    function selOption(obj, val) {
        $(obj).find("option[value='" + val + "']").attr("selected", "selected");
    }

    //确定按钮,取最小区id
    function confirmSum() {
        var selAreaId;
        var county = $("#county").val();
        console.log($("#county option").size());

        if (county == "-1" && ($("#county option").size() == 1)) {
            selAreaId = $("#city").val();
        } else {
            selAreaId = county;
        }

        if (selAreaId == "-1") {
            alert("请选择地区");
            return;
        }
        console.log("选择的" + selAreaId);
    }

</script>
</html>